import React from "react";
import { useNavigate } from "react-router-dom"
import { ToastContainer, toast } from 'react-toastify'
import { Input, Form } from '@components'

import formValidations from '@schemas/schema'
import { doRegisterReq } from '@services/user'

const Login = () => {
  // 默认参数配置
  const initialValues = {
    name: ''
  }
  const navigate = useNavigate()
  const onSubmit = async (data) => {
    const res = await doRegisterReq(data)
    if (res && res.code === '000000') {
      toast.success('注册成功', {
        onClose: () => {
          navigate('/login')
        }
      })
    }
  }
  return (
    <div className="p-5 w-80 mt-8 mx-auto rounded-md bg-white shadow-md">
      <h2 className="text-2xl my-5 font-bold">注册</h2>
      <Form
        onSubmit={onSubmit}
        initialValues={initialValues}
        formValidations={formValidations}
      >
        <div className="mb-5">
          <Input
            label="用户名"
            placeholder="请输入用户名"
            name="name"
            maxLength={30}
          />
        </div>
        <div className="mb-5">
          <Input
            label="密码"
            type="password"
            placeholder="请输入用户密码"
            name="pwd"
            maxLength={30}
            ruleOptions={{
              required: true
            }}
          />
        </div>
        <div className="mb-5">
          <Input
            label="确认密码"
            type="password"
            placeholder="请输入确认密码"
            name="comfirmPwd"
            maxLength={30}
            ruleOptions={{
              required: true,
            }}
          />
        </div>
        
        <button type="submit" className="w-full bg-[#007BFF] hover:bg-[#0056b3] text-white p-2.5 rounded-[5px] cursor-pointer">
          注册
        </button>
      </Form>
      <ToastContainer autoClose={1000} />
    </div>
  )
}

export default Login